<template>
  <div class="app-container">
    <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table v-loading="!pload" border :data="tableData" style="margin-top:50px;">
      <el-table-column property="total" label="数据总数量" align="center" show-overflow-tooltip width="120"></el-table-column>
      <el-table-column property="finished" label="导入成功数量" align="center" show-overflow-tooltip width="120"></el-table-column>
      <el-table-column property="error" label="导入失败数量" align="center" show-overflow-tooltip width="120"></el-table-column>
      <el-table-column property="name" label="整体进度">
        <template slot-scope="scope">
        <el-progress :text-inside="true" :stroke-width="18" :percentage="percent(scope.row)"></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import WS from '@/utils/websocket'
export default {
  data() {
    return {
      tableData: [],
      pload: false
    }
  },
  components: {
    UploadExcel: () => import('@/components/UploadExcel')
  },
  created() {
    this.getData()
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 50
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '请选择50m以内的excel文件',
        type: 'warning'
      })
      return false
    },
    handleSuccess(res) {
      console.log(res)
    },
    percent(row) {
      return parseInt((row.finished + row.error) / (row.total || 1) * 100)
    },
    async getData() {
      console.log(this.$S.path)
      var url = this.$S.path.replace(/^http:\/\//, 'ws://')
      url = url.replace(/^https:\/\//, 'wss://')
      var ws = new WS(url + '/api1/uploadArticleProcess')
      console.log(ws)
      ws.onopen = msg => {
        console.log(msg)
      }
      ws.onmessage = msg => {
        this.pload = true
        this.tableData = JSON.parse(msg.data)
        console.log(msg)
      }
      ws.onerror = msg => {
        console.log(msg)
      }
    }
  }
}
</script>